<!-- Total Invited Users - detail -->
<template>
	<Modal 
		v-model="detailPopup" 
		width="1090" 
		:closable="true" 
		:mask-closable="false"
	  class-name="invited-users-modal"
		title="Total Invited Users"
		:footer-hide="true"
		@on-cancel="close"
		>
	  <div class="pt-8 detail-users">
			<Tabs>
				<TabPane label="Trend">
					<div class="pt-16 pb-70">
						<!-- 时间区间 -->
						<div class="flex a-c">
							<DatePicker 
								type="daterange" 
								placeholder="Select the time - Select the time" 
								style="width: 314px" 
								:transfer="true"
								:value="trendTime"
								@on-change="changeTrend"
								>
							</DatePicker>
							<Button class="ml-16 f-16 button-detail" :loading="loading" @click="resetTrend">Reset</Button>
						</div>
						<!-- 折线图 -->
						<div v-if="dataTrend.length">
							<div class="mt-40 detail-trend" id="trend"></div>
						</div>
						<!-- 无数据 -->
						<div class="flex a-c j-c ptb-100" v-if="dataTrend.length == 0">
							<div class="fz-0">
								<img class="new-empty" src="@/assets/images/public/new-empty.png" />
								<img class="store-empty-icon" src="@/assets/images/public/store-empty-icon.png" />
								<div class="flex a-c j-c mt-10 f-14 lin-20 col-888">
									{{$t('public.noData')}}
								</div>
							</div>
						</div>
					</div>
				</TabPane>
				<TabPane label="Details">
					<div class="pt-16 pb-30">
						<!-- 时间区间 -->
						<div class="flex a-c">
							<DatePicker 
								type="daterange" 
								placeholder="Select the time - Select the time" 
								style="width: 314px" 
								:transfer="true"
								:value="detailsTime"
								@on-change="changeDetails"
								>
							</DatePicker>
							<Button class="ml-16 f-16 button-detail" :loading="loading" @click="resetDetails">Reset</Button>
						</div>
						<!-- 表格与分页 -->
						<div class="mt-16" v-if="dataDetails.length">
							<Table class="details-table" :columns="columnsDetails" :data="dataDetails" :max-height="340"></Table>
							<div class="flex a-c j-sb mt-16">
								<div class="col-888 f-14 lin20">
									Total <span class="col-ff1">{{totalDetails}}</span> data
								</div>
								<Page class="details-page" :total="totalDetails" :current="detailsQuery.pageNo" @on-change="detailPageChange"/>
							</div>
						</div>
						<!-- 无数据 -->
						<div class="flex a-c j-c ptb-100" v-if="dataDetails.length == 0">
							<div class="fz-0">
								<img class="new-empty" src="@/assets/images/public/new-empty.png" />
								<img class="store-empty-icon" src="@/assets/images/public/store-empty-icon.png" />
								<div class="flex a-c j-c mt-10 f-14 lin-20 col-888">
									{{$t('public.noData')}}
								</div>
							</div>
						</div>
					</div>
				</TabPane>
			</Tabs>
		</div>
	</Modal>
</template>

<script>
	import * as echarts from 'echarts';
	import { dateInvitePage,dateInviteNum } from '@/api/invite';
	
	export default{
		data(){
			return{
				detailPopup:false,
				loading:false,
				columnsDetails:[
					{
						title:'User Name',
						key:'username'
					},
					{
						title:'Signed Time',
						key:'registerTime'
					}
				],
				dataDetails:[],
				dataTrend:[],
				totalDetails:0,
				trendQuery:{},
				detailsQuery:{
					pageNo:1,
					pageSize:10
				},
				trendTime:[],
				detailsTime:[],
				trendEcharts:null
			}
		},
		methods:{
			open(){
				this.getDateInvitePage();
				this.getDateInviteNum();
				this.detailPopup = true;
			},
			close(){
				this.detailPopup = false;
			},
			//Trend日期选择
			changeTrend(e){
				this.trendTime = e;
				if(e && e.length){
					this.trendQuery.startTime = e[0];
					this.trendQuery.endTime = e[1];
				}else{
					delete this.trendQuery.startTime;
					delete this.trendQuery.endTime;
				}
				this.getDateInviteNum();
			},
			//重置 - Trend
			resetTrend(){
				delete this.trendQuery.startTime;
				delete this.trendQuery.endTime;
				this.trendTime = [];
				this.getDateInviteNum();
			},
			//Details
			getDateInvitePage(){
				this.loading = true;
				dateInvitePage(this.detailsQuery).then(res => {
					this.loading = false;
					this.dataDetails = res.result.records;
					this.totalDetails = res.result.total;
				}).catch(() => {
					this.loading = false;
				})
			},
			//trend
			getDateInviteNum(){
				this.loading = true;
				dateInviteNum(this.trendQuery).then(res => {
					this.loading = false;
					this.dataTrend = res.result;
					if(res.result.length){
						setTimeout(() => {
							this.getTrendEcharts();
						},10)
						return;
					}
					//无数据销毁示例
					setTimeout(() => {
						this.trendEcharts.dispose();
					},10)
				}).catch(() => {
					this.loading = false;
				})
			},
			getTrendEcharts(){
				let xAxisData = [];
				let seriesData = [];
				this.dataTrend.forEach(item => {
					xAxisData.push(item.date);
					seriesData.push(item.inviteNum);
				})
				var chartDom = document.getElementById('trend');
				this.trendEcharts = echarts.init(chartDom);
				var option;
				option = {
					grid:{
						left:'5%',
						right:'5%',
						top:20,
						bottom:24
					},
					tooltip: {
						trigger: 'axis',
						formatter:function(params){
							let toolTipHtml = `
								<div class="col-fff f-12 bold lin-17">${params[0].name}</div>
								<div class="flex a-c mt-8">
									<img style="width:20px;height:20px;" src="${require('@/assets/images/public/echarts-tooltip-icon.png')}" />
									<div class="col-ff1 f-16 lin-22 bold ml-4">${params[0].value}</div>
								</div>
								<div class="f-10 lin-14 mt-4" style="color:rgba(255, 255, 255, .6)">
									Invited Users
								</div>
							`;
							return toolTipHtml;
						},
						backgroundColor:'rgba(34, 34, 34, .9)',
						padding:[8,16]
					},
					color:['#FF186B'],
				  xAxis: {
				    type: 'category',
				    data: xAxisData
				  },
				  yAxis: {
				    type: 'value'
				  },
				  series: [
				    {
				      data: seriesData,
				      type: 'line',
							lineStyle:{
								width:4
							} 
				    }
				  ]
				};
				option && this.trendEcharts.setOption(option);
			},
			//Details 日期选择
			changeDetails(e){
				this.detailsTime = e;
				if(e && e.length){
					this.detailsQuery.startTime = e[0];
					this.detailsQuery.endTime = e[1];
				}else{
					delete this.detailsQuery.startTime;
					delete this.detailsQuery.endTime;
				}
				this.getDateInvitePage();
			},
			//重置 - Details
			resetDetails(){
				this.detailsTime = [];
				this.detailsQuery.pageNo = 1;
				delete this.detailsQuery.startTime;
				delete this.detailsQuery.endTime;
				this.getDateInvitePage();
			},
			//页码改变
			detailPageChange(e){
				this.detailsQuery.pageNo = e;
				this.getDateInvitePage();
			}
		}
	}
</script>

<style lang="less" scoped>
	:deep(.invited-users-modal){
		.ivu-modal-header-inner{
			font-size: 24px;
		}
		.ivu-modal-header{
			border: none;
			padding-bottom: 0;
		}
		.ivu-modal-body{
			padding-top: 0;
		}
		.ivu-tabs-bar{
			border-color: #E2E2E2;
		}
		.ivu-tabs-nav-container{
			line-height: 48px;
		}
		.ivu-tabs-tab{
			font-size: 18px;
			color: #888;
			padding-top:0;
			padding-bottom:0;
			font-family: "AlibabaSans-Regular" !important;
		}
		.ivu-tabs-tab-active{
			color: #FF186B;
		}
	}
	.detail-users{
		.detail-trend{
			height:352px;
			width:1050px;
		}
		.button-detail{
			border-color: #222;
		}
		.new-empty{
			width:160px;
			height:160px;
			display:block;
			margin:auto;
		}
		.store-empty-icon{
			width:52px;
			height:16px;
			display:block;
			margin:auto;
			margin-top:22px;
		}
	}
	:deep(.details-table){
		.ivu-table-cell{
			color: #888;
			font-weight: 400;
		}
		.ivu-table th, .ivu-table td{
			height: 38px;
		}
		tr td .ivu-table-cell{
			color:#222;
		}
	}
	:deep(.details-page){
		.ivu-page-item-active{
			background: #FF186B;
			a{
				color: #fff;
			}
		}
	}
</style>